<template>
  <div>
		<el-space>
			<el-input v-model="roomNo" placeholder="请输入要查询的房间号"></el-input>
			<el-button type="primary" @click="search">查询</el-button>
			<el-button type="success" @click="add">办理入住</el-button>
		</el-space>
		<el-table :data="tableData.records">
			<el-table-column label="客户姓名" prop="name"  width="100"></el-table-column>
			<el-table-column label="血型" prop="bloodType" width="70"></el-table-column>
			<el-table-column label="联系电话" prop="contactTel" width="120"></el-table-column>
			<el-table-column label="年龄" width="70">
				<template #default="scope">
					<span>{{getAge(scope.row.birthday)}}</span>
				</template>
			</el-table-column>
			<el-table-column label="性别" width="70">
				<template #default="scope">
					<span>{{scope.row.sex === 0 ? '女' : '男'}}</span>
				</template>
			</el-table-column>
			<el-table-column label="家属" prop="familyMember" width="100"></el-table-column>
			<el-table-column label="身份证号" prop="idcard" width="170"></el-table-column>
			<el-table-column label="房间号" prop="roomName" width="100"></el-table-column>
			<el-table-column label="床号" prop="bedNo" width="100"></el-table-column>
			<el-table-column label="生日" prop="birthday" width="120"></el-table-column>
			<el-table-column label="操作" width="150">
				<template #default="scope">
					<el-button type="success" size="small" @click="update(scope.row.id)">修改</el-button>
					<el-button type="danger" size="small" @click="del(scope.row.id)">退住</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			background
			v-model:current-page="params.pageNo"
			:page-count="tableData.pages"
			@change="getTable"></el-pagination>
		<el-dialog
			v-model="editDialog.show"
			:title="editDialog.title"
			width="400px"
			:close-on-click-modal="false">
			<Edit v-model:show="editDialog.show" :id="editDialog.id" :urls="request_url" :getTable="getTable" v-if="editDialog.show" />
		</el-dialog>
  </div>
</template>
<script setup>
import { get, post } from '@/axios'
import { reactive, ref } from 'vue'
import Edit from './edit'
import { ElMessageBox, dayjs } from 'element-plus'

const modelUrl = '/customer'
const request_url = {
	list: modelUrl + '/list',
	del: modelUrl + '/delete',
	getById: modelUrl + '/getById',
	add: modelUrl + '/add',
	update: modelUrl + '/update',
	getRooms: modelUrl + '/getRooms'
}
const tableData = ref([])
const roomNo = ref('')
const editDialog =reactive({
	show: false,
	title: '',
	id: null
})
const params = reactive({
	pageNo: 1,
	pageSize: 9,
	roomNo: ''
})
function getTable () {
	get(request_url.list, params, content => {
		tableData.value =content
		console.dir(content)
	})
}
function search () {
	params.pageNo = 1
	params.roomNo = roomNo.value
	getTable()
}
function add () {
	editDialog.id = null
	editDialog.title = '入住管理'
	editDialog.show = true
}
function update (id) {
	editDialog.id = id
	editDialog.title = '修改入住信息'
	editDialog.show = true
}
function del(id) {
	ElMessageBox.confirm('确定要删除该房间吗？', '删除警告', {
		type: 'warning',
		confirmButtonText: '确定',
		cancelButtonText: '取消'
	}).then(() => {
		post(request_url.del, { id }, content => {
			getTable()
		})
	}).catch(() => {})
}
function getAge(birthday) {
	return dayjs(new Date()).diff(dayjs(birthday), 'year')
}
getTable()
</script>

<style scoped lang="scss">
.el-pagination, .el-table {
	margin-top: 10px;
}
</style>